<template>
  <view class="cat-box">
    <view class="cat-list" v-for="item in 2">
      <view class="cat-top">
        <view class="img">
          <image src="https://picsum.photos/200/300?13" mode="scaleToFill" />
        </view>
        <view class="title">博士爱订货商城</view>
      </view>
      <view class="cat-bottom">
        <view class="cat-item">
          <view class="list">
            <uv-radio-group placement="column" activeColor="#008c8c">
              <uv-radio
                shape="circle"
                :customStyle="{ margin: '8px' }"
                name="1"
                v-for="item in 2"
              >
                <view class="lis">
                  <view class="lis-img">
                    <image
                      src="https://picsum.photos/200/300?12"
                      mode="scaleToFill"
                  /></view>
                  <view class="list-name">
                    <view class="name">[全新小黑瓶]淡纹大师玫瑰润养</view>
                    <view class="num">
                      <view class="price">
                        <view>￥</view>
                        <view>336</view>
                      </view>
                      <view class="num1">
                        <uv-number-box
                          bgColor="#008c8c"
                          color="#ffffff"
                          iconStyle="color: #fff"
                          v-model="value"
                          @change="valChange"
                        ></uv-number-box>
                      </view>
                    </view>
                  </view>
                </view>
              </uv-radio>
            </uv-radio-group>
          </view>
        </view>
      </view>
    </view>
    <view class="cat-btn">
      <view class="cd">
        <uv-radio-group>
        <uv-radio :customStyle="{ margin: '8px' }" name="3"> <view class="but-name">全选</view></uv-radio>
      </uv-radio-group>
      </view>
      <view class="but">
        <view class="but-name"
          >合计:
          <view class="but-nam" style="color: red"
            ><view>￥</view> <view style="font-size: 45rpx">23</view></view
          >
        </view>
        <view class="but-bt">
          <uv-button text="删除" color="#d6f1ed" size="large"></uv-button>
          <uv-button text="去结算" color="#008c8c" size="large"></uv-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    valChange(e) {
      console.log("当前值为: " + e.value);
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("./cat.css");
</style>
